<template>
    <page-layout>
        <template v-slot:header>
            <el-input v-model="query.name" placeholder="输入产品名字查询" size='small'/>
            <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            <el-button type='success' size='small'>新增</el-button>
        </template>

        <el-table :data="tableData"
            style="width: 100%"
            height="100%"
            size='small'>
            <el-table-column prop="name" label="产品名字" width="180" fixed/>
            <el-table-column prop="state" label="状态" width="180" fixed="left">
                <template v-slot="{ row: { state }}">
                    <div v-mystate="state"/>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="180">
                <template v-slot="data">
                    <div>
                        {{data.row.type | typeFilter(medicalType)}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="level" label="级别" width="180">
                <template v-slot="data">
                    <div>
                        {{data.row.level | typeFilter(levelType)}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌" width="180"/>
            <el-table-column prop="place" label="产地"
                show-overflow-tooltip width="260"/>
            <el-table-column prop="price" label="售价" width="180"/>
            <el-table-column prop="remark" label="备注"
                :show-overflow-tooltip="true" width="320"/>
            <el-table-column label="操作" width="180" fixed="right">
                <!-- v-slot这个指令相当于 slot和slot-scope属性的合集(这两个属性在vue3中没有) -->
                <!-- v-slot:slotName 等于 slot="slotName" -->
                <!-- v-slot="arguments" 等于 slot-scope="arguments" -->
                <template slot-scope="{ row }">
                    <el-button type="text" @click="detailEvt(row)" size="small">详情</el-button>
                    <!-- 如果用户没有产品的编辑权限：可以是不显示按钮、可以用户点击按钮的时候提示用户没有权限 -->
                    <el-button v-if="row.state === 'new'" type="text" size="small" @click="editEvt(row)">编辑</el-button>
                    <el-popconfirm :title="`确定要删除【${row.name}】产品信息，删除后不可以恢复，确定要删除？`">
                        <template #reference>
                            <el-button v-if="row.state === 'new'" style="margin: 0 6px" type="text" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button v-if="row.state === 'new'" type="text" size="small">审批</el-button>
                    <el-button v-if="row.state === 'sales'" type="text" size="small">下架</el-button>
                    <el-button v-if="row.state === 'finish'" type="text" size="small">上架</el-button>
                </template>
            </el-table-column>
        </el-table>

        <template v-slot:footer>
            <el-pagination :page-sizes="[20, 50, 100, 150]"
                :page-size="query.size"
                :current-page="query.page"
                @size-change="sizeChange"
                @current-change="currentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"/>
        </template>
    </page-layout>
</template>

<script>
import { dictListApi, productListApi } from '../../../apis/productApi'
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            query: {
                page: 1,
                size: 20,
                name: ''
            },
            changeTimer: null,
            medicalType: [],
            levelType: []
        }
    },

    filters: {
        // typeFilter(val, types) {
        //     let dict = types.find(it => it.code === val)
        //     if (!dict) return val
        //     return dict.name
        // }
    },

    directives: {
        mystate(el, {value}) {
            // console.log(el, value)
            // 要把sales、finish、new转为中文在售、已下架、新建
            let obj = {
                sales: {text: '在售', cls: 'product-state sale'},
                finish: {text: '已下架', cls: 'product-state'},
                new: {text: '新建', cls: 'product-state new'}
            }
            el.setAttribute('class', obj[value].cls)
            el.innerHTML = obj[value].text
        }
    },

    async mounted() {
        
        // let result = await dictListApi('MEDICAL')
        // if (result.code === 200) {
        //     this.medicalType = result.data.rows
        // }
        // let reuslt01 = await dictListApi('PRODUCT_LEVEL')
        // if (reuslt01.code === 200) {
        //     this.levelType = reuslt01.data.rows
        // }
        Promise.all(
            [
                dictListApi('MEDICAL'),
                dictListApi('PRODUCT_LEVEL')
            ]
        ).then(d => {
            if (d[0].code === 200) this.medicalType = d[0].data.rows
            if (d[1].code === 200) this.levelType = d[1].data.rows
        })
        
        this.getList()


    },

    methods: {
        // 根据新的条件进行查询，那么必须从第一页开始查询
        async queryEvt() {
            this.query.page = 1
            this.getList()
        },
        // 获取列表数据的方法
        async getList() {
            let result = await productListApi(this.query)
            if (result.code === 200) {
                this.tableData = result.data.rows
                this.total = result.data.count
            }
        },
        sizeChange(size) {
            this.query.size = size
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        currentChange(page) {
            this.query.page = page
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        detailEvt(data) {
            this.$router.push('/product/detail?id=' + data.id)
        },
        editEvt(data){
            this.$router.push('/product/edit?id=' + data.id)
        }
    }
}
</script>

<style lang="less" scoped>
    .product-state {
        color: #999;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #999;
            margin-right: 6px;
        }
        &.sale {
            color: #409EFF;
            &::before {
                background: #409EFF;
            }
        }
        &.new {
            color: #85ce61;
            &::before {
                background: #85ce61;
            }
        }
    }
</style>